<template>
  <div class="mb24" style="display: flex">
    <div class="bgc-white br4 p24 mr24" style="flex: 1">
      <div class="flex-center-between">
        <div class="flex-center mb18">
          <div class="br2 bgc-theme mr12" style="width: 4px; height: 16px"></div>
          <div class="fs16 fw500 tc-black ml4">电子合同</div>
        </div>
        <div class="flex-center mb18">
          <div :class="selectF === 0 ? 'titletselect' : 'titlet'" @click="onSelect(0)">本周</div>
          <div :class="selectF === 1 ? 'titletselect' : 'titlet'" @click="onSelect(1)">本月</div>
          <div :class="selectF === 2 ? 'titlet2select' : 'titlet2'" @click="onSelect(2)">全年</div>
          <a-month-picker style="margin-right: 10px" placeholder="开始日期" :value="dateStartTemp" @change="startTimeChange" />
          <a-month-picker placeholder="结束日期" @change="endTimeChange" :value="dateEndTemp" />
        </div>
      </div>
      <div id="contract_chart" style="width: 100%; height: 400px" />
    </div>
    <div
      class="br4 bgc-white p24"
      style="width: 280px; height: 500px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between"
    >
      <div>
        <div class="flex-center mb18">
          <div class="br2 bgc-theme mr12" style="width: 4px; height: 16px"></div>
          <div class="fs16 fw500 tc-black ml4">电子合同签约量排名</div>
        </div>
        <template v-if="total > 0">
          <div v-for="(item, index) in pData" :key="index" class="staff-top-p">
            <div class="staff-top-rank-item">
              <img v-if="index === 0" style="margin-left: -7px; margin-right: 5px; width: 30px; height: 30px" src="./images/1.png" />
              <img v-else-if="index === 1" style="margin-left: -7px; margin-right: 5px; width: 30px; height: 30px" src="./images/2.png" />
              <img v-else-if="index === 2" style="margin-left: -7px; margin-right: 5px; width: 30px; height: 30px" src="./images/3.png" />
              <div
                v-else
                class="br14 mr8"
                style="
                  margin-left: -4px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 30px;
                  height: 23px;
                  background-color: #f0f2f5;
                "
              >
                {{ index + 1 }}
              </div>
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ item.subjectName }}</span>
                </template>
                <div class="staff-top-rank-left">{{ item.subjectName }}</div>
              </a-tooltip>
              <div style="width: 20%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #a0a0a0">
                {{ item.count }}份
              </div>
            </div>
          </div>
        </template>
        <a-empty v-else style="height: 400px; padding-top: 130px" />
      </div>
      <a-pagination
        v-if="total > 7"
        show-quick-jumper
        :page-size="7"
        size="small"
        :default-current="pageNo"
        :total="total"
        @change="onChange"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import echarts from "echarts";
import moment from "moment";
import { getComCountPostReq, getTongji } from "../api";
export default {
  data() {
    return {
      total: 0,
      pageNo: 1,
      open: true,
      selectF: 2,
      dateStartTemp: null,
      dateEndTemp: null,
      dateStart: {},
      dateEnd: {},
      joinDateStart: null,
      joinDateEnd: null,
      joinDateMoment: ["month", "month"],
      xAxis: [],
      series: [],
      pData: [],
      siteId: undefined
    };
  },
  computed: {
    ...mapState(["hr", "site"]),
    targetIds() {
      if (this.site.selectAllIds && this.site.selectAllIds !== "-1") {
        return this.site.selectAllIds.split(",");
      }
      return [];
    }
  },
  watch: {
    targetIds: {
      handler(newVal) {
        if (newVal.length > 0) {
          this.$nextTick(() => {
            this.initContract(newVal);
          });
        }
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    onSelect(index, subjectIds) {
      this.selectF = index;
      const contractChart = echarts.init(document.getElementById("contract_chart"));
      const params = {
        subjectIds: subjectIds || this.targetIds
      };
      if (index === -1) {
        params["publishDateStart"] = moment(this.dateStart.date).valueOf() + "";
        params["publishDateEnd"] = moment(this.dateEnd.date).valueOf() + "";
      } else {
        this.dateStart.dateString = "";
        this.dateStart.date = null;
        this.dateStartTemp = "";
        this.dateEnd.dateString = "";
        this.dateEnd.date = null;
        this.dateEndTemp = "";
      }
      getTongji(index, params)
        .then((res) => {
          this.xAxis = [];
          this.series1 = [];
          this.series2 = [];
          this.series3 = [];
          const temp = JSON.parse(JSON.stringify(res.data));
          temp.forEach((item, index) => {
            this.xAxis[index] = item.date;
            item.list.forEach((da, ind) => {
              for (var i in da) {
                // i 就是键，d[i]就是值
                if (i === "toSignedByComCount") {
                  // 发起合同数
                  this.series1[index] = parseInt(da[i]);
                }
              }
            });
          });
          contractChart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              right: 0,
              bottom: 24,
              left: 36,
              top: 12
            },
            legend: {
              show: false
            },
            xAxis: {
              data: this.xAxis,
              max: "30"
            },
            yAxis: {},
            series: [
              {
                name: "发起合同数",
                type: "bar",
                stack: "统计",
                barMaxWidth: "20",
                color: "#4282FF",
                data: this.series1
              }
            ],
            label: {}
          });
          setTimeout(() => {
            window.onresize = () => {
              contractChart.resize();
            };
          }, 200);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    onChange(pageNumber) {
      this.pageNo = pageNumber;
      let a = [];
      if (this.siteId && this.siteId !== "-1") {
        a = this.siteId.split(",");
      }
      var data = {
        pageNo: this.pageNo,
        pageSize: 7,
        subjectIds: a
      };
      getComCountPostReq(data)
        .then((res) => {
          this.total = res.data.entityCount;
          this.pageNo = res.data.pageNo;
          // 获取排行榜
          this.pData = res.data.entities;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    initContract(subjectIds) {
      this.onSelect(this.selectF, subjectIds); // 初始化柱状图
      getComCountPostReq({
        pageNo: this.pageNo,
        pageSize: 7,
        subjectIds
      })
        .then((res) => {
          // 获取排行榜
          this.total = res.data.entityCount;
          this.pageNo = res.data.pageNo;
          this.pData = res.data.entities;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    startTimeChange(date, dateString) {
      this.dateStart.dateString = dateString;
      this.dateStart.date = date;
      this.dateStartTemp = date;
      if (this.dateEndTemp != null && this.dateStart.date != null && this.dateEnd.date != null) {
        if (this.dateStart.date < this.dateEnd.date) {
          this.onSelect(-1);
        } else {
          this.$notification.open({
            message: "日期选择错误",
            description: "开始日期不允许大于结束日期",
            icon: <a-icon type="smile" style="color: #108ee9" />
          });
        }
      } else if (this.dateStart.date === null && this.dateEnd.date === null) {
        this.onSelect(0);
      }
    },
    endTimeChange(date, dateString) {
      this.dateEnd.dateString = dateString;
      this.dateEnd.date = date;
      this.dateEndTemp = date;
      if (this.dateStartTemp != null && this.dateStart.date != null && this.dateEnd.date != null) {
        if (this.dateStart.date < this.dateEnd.date) {
          this.onSelect(-1);
        } else {
          this.$notification.open({
            message: "日期选择错误",
            description: "开始日期不允许大于结束日期",
            icon: <a-icon type="smile" style="color: #108ee9" />
          });
        }
      } else if (this.dateStart.date === null && this.dateEnd.date === null) {
        this.onSelect(0);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.staff-top-p {
  width: 100%;
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
}
.staff-top-rank-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.staff-top-rank-left {
  color: #595959;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.titlet-color {
  margin-left: 5px;
  margin-right: 24px;
  font-size: 14px;
  color: #595959;
  cursor: pointer;
}

.titlet {
  margin-left: 12px;
  margin-right: 12px;
  font-size: 14px;
  color: #595959;
  cursor: pointer;
}
.titletselect {
  margin-left: 12px;
  margin-right: 12px;
  font-size: 14px;
  color: var(--primary);
  cursor: pointer;
}
.titlet2 {
  margin-left: 12px;
  margin-right: 12px;
  font-size: 14px;
  color: #595959;
  cursor: pointer;
  margin-right: 24px;
}
.titlet2select {
  margin-left: 12px;
  margin-right: 12px;
  font-size: 14px;
  color: var(--primary);
  cursor: pointer;
  margin-right: 24px;
}
</style>
